<template>
  <div>
    <ContentTitle :info="ctInfo" />
    <!-- 计费规则 -->
    <div class="rules">
      <div class="rules-d">
        <div>
          <i class="iconfont icon-info"></i>
          <span>目前计费功能暂不完善，所以计费功能暂未正式启用。</span>
        </div>
        <div>
          <i class="iconfont icon-info"></i>
          <span
            >正式收费后，我们将发送通知至首页公告；在此期间，若有欠费情况可联系我们：发送邮件至</span
          >
          <el-link type="primary">sensecap@seeed.cc</el-link>
        </div>
        <el-link type="primary">点击查看具体收费规则</el-link>
      </div>
    </div>
    <div class="rules-s">
      <el-card class="box-card rules-b">
        <div slot="header" class="clearfix">
          <i class="iconfont icon-info"></i>
          <span>设备概览</span>
        </div>
        <div>
          <el-row>
            <el-col :span="2" class="titleName">计划:</el-col>
            <el-col :span="4">按量付费</el-col>
          </el-row>
          <el-row>
            <el-col :span="2" class="titleName">状态:</el-col>
            <el-col :span="4">正常</el-col>
          </el-row>
        </div>
      </el-card>
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <i class="iconfont icon-info"></i>
          <span>设备概览</span>
        </div>
        <div>
          <el-row>
            <el-col :span="2" class="titleName">账户余额:</el-col>
            <el-col :span="10">￥</el-col>
          </el-row>
          <el-row>
            <el-col :span="2" class="titleName">充值金额:</el-col>
            <el-col :span="4">
              <el-input v-model="money" placeholder="请输入充值金额" size="mini" clearable></el-input>
              </el-col>
          </el-row>
          <el-row>
            <el-col :span="2" class="titleName">备注:</el-col>
            <el-col :span="4">
              <el-input v-model="note" placeholder="请输入备注信息" size="mini" clearable></el-input>
              </el-col>
          </el-row>
          <el-row>
            <el-col :span="4" class="titleName" :offset="2">
            <el-button type="primary" size="mini">充值</el-button>
            </el-col>
          </el-row>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
import ContentTitle from "@/components/ContentTitle.vue";
export default {
  name: "accountJ",
  components: { ContentTitle },
  data() {
    return {
      ctInfo: {
        type: "计费",
        text: "账户信息",
        msg: "展示当前账户的剩余消息额度，可根据兑换码兑换消息额度。",
      },
      money:'',
      note:'',
    };
  },
};
</script>

<style scoped lang="less">
.rules {
  width: 88.3%;
  min-width: 1162px;
  height: 90px;
  position: absolute;
  top: 123px;
  .rules-d {
    height: 70px;
    padding: 10px 40px;
    color: #666666;
    font-size: 14px;
    background: #fff;
    border-radius: 0 0 5px 5px;
    div {
      margin-bottom: 5px;
      i {
        font-size: 20px;
        margin-right: 3px;
        color: orange;
        font-weight: 600;
      }
    }
  }
}
.rules-s {
  margin-top: 100px;
  .rules-b {
    margin-bottom: 10px;
  }
}
.el-row{
  height: 40px;
  font-size: 14px;
}
.titleName{
  font-weight: 600;
  color: #000;
}
</style>
